<script setup>
import { useRouter, useRoute } from 'vue-router';
import { tagArticleListFn } from '@/api/home';
import { ref } from 'vue'

const route = useRoute()
const router = useRouter()
const articleList = ref([])

tagArticleListFn({
    tag: route.query.tag
}).then(res => {
    // console.log(res);
    articleList.value = res.data
})

function toShow(article) {
    // console.log(article);
    router.push({
        name: 'homeShow',
        query: {
            paraid: article.paraid
        }
    })
}

const refresh = ref(false)
function onRefresh() {
    setTimeout(() => {
        showToast('刷新成功')
        count.value = 1
        list.value = articleList.value.slice((count.value - 1) * 10, count.value * 10)
        refresh.value = false;
        finished.value = false
    }, 1000)
}

const loading = ref(false)
const finished = ref(false)
const count = ref(1)
const list = ref([])
function onLoad() {
    setTimeout(() => {
        list.value = list.value.concat(articleList.value.slice((count.value - 1) * 10, count.value * 10))
        count.value++
        loading.value = false
        if (list.value.length >= articleList.value.length) {
            finished.value = true
        }
    }, 100)
}

function toback() {
    router.back()
}
</script>

<template>
    <div class="main">
        <van-nav-bar :title="route.query.tag" left-text="返回" left-arrow @click-left="toback" />
        <div class="content">
            <van-pull-refresh v-model="refresh" @refresh="onRefresh">
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <van-card v-for="item in list" :desc="item.desc" :title="item.title" :thumb="item.img"
                        @click="toShow(item)">
                        <template #tags>
                            <van-tag plain :type="item.tag.type">{{ item.tag.name }}</van-tag>
                        </template>
                        <template #price>
                            {{ item.data }}
                        </template>
                    </van-card>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.van-nav-bar {
    background-color: rgb(255, 65, 198);
    // color: white;
}

.content {
    padding: 0 10px;

    span {
        margin: 0 10px;
    }

    img {
        margin-top: 20px;
        width: 100%;
        height: 250px;
    }

    .para {
        font-size: 14px;
        text-indent: 2em;
    }
}
</style>